<template>
    <div>
        <el-dialog title="更改数据" :visible.sync="dialogForm2Visible">
          <el-form :model="form2">
            <el-form-item label="型号" :label-width="formLabelWidth">
              <el-input
                v-model="form2.name"
                autocomplete="off"
                style="width: 100px"
              ></el-input>
            </el-form-item>
            <el-form-item label="价格" :label-width="formLabelWidth">
              <el-input
                v-model="form2.price"
                autocomplete="off"
                style="width: 100px"
              ></el-input>
            </el-form-item>
            <el-form-item label="出厂日期" :label-width="formLabelWidth">
              <el-date-picker
                v-model="form2.date"
                align="right"
                type="date"
                placeholder="选择日期"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="配置" :label-width="formLabelWidth">
              <el-input v-model="form2.desc" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogForm2Visible = false">取 消</el-button>
            <el-button type="primary" @click="genggai11(),dialogForm2Visible = false"
              >确 定</el-button
            >
          </div>
        </el-dialog>
        <div
          style="
            width: 70%;
            height: 50px;
            margin-left: 56px;
            display: flex;
            justify-content: space-between;
          "
        >
          <label for=""
            ><input
              type="text"
              style="width: 120px; height: 20px"
              placeholder="请输入"
              v-model="shousiozhi"
            />
            <button
              style="
                color: #fff;
                width: 60px;
                height: 30px;
                background-color: #409eff;
                border: none;
                border-radius: 5px;
              "
              @click="shousio()"
            >
              搜索
            </button>
          </label>
        </div>
        <div style="width: 1200px">
        <table
            border="1"
            cellspacing="0"
            style="
              margin: auto;
              width: 90%;
              text-align: center;
              background-color: #e7e1e1;
            "
          >
            <thead>
              <tr>
                <th>型号</th>
                <th>出厂日期</th>
                <th>价格</th>
                <th>配置</th>
                <th>操作</th>
              </tr>
              <tr v-for="(item, index) in arr" :key="index"  style="background-color: beige;">
                <td>{{ item.name }}</td>
                <td>{{ item.date }}</td>
                <td>{{ item.price }}</td>
                <td>{{ item.desc }}</td>
                <td>
                  <el-button type="text" @click="genggai(item.id)">编辑</el-button>
                  <el-button type="text" style="color: red;" @click="open(item.id)">删除</el-button>
                </td>
              </tr>
            </thead>
          </table>
          <div
            style="
              width: 89.9%;
              height: 29px;
              outline: 1px solid #000;
              margin: auto;
              background-color: #e7e1e1;
            "
          >
            <fenyeqi
              :arr="arr.length"
              :arr2="arr2.length"
              :hangshu="this.hangshu"
              @shu="ck"
              style="float: right"
            >一共{{arr1.length}}条信息</fenyeqi>
          </div>
        </div>
      </div>
    </template>
    <script>
    import axios from "axios";
    import fenyeqi from "./fenyeqi.vue";
    export default {
      components: { fenyeqi },
      data() {
        return {
          currentPage1: 5,
          count: 1,
          arr2: "", //更改的数据
          arr: [], //页面数据
          arr1: [], //总数据
          hangshu: 10,
          shousiozhi: "",
          id:99,
          dialogForm2Visible:false,
          form2: {
            name:"",
            price:"",
            date: "",
            id:'',      
            delivery: false,
            type: [],
            resource: "",
            desc: "",
          },
          formLabelWidth: "120px",
          pickerOptions: {
            disabledDate(time) {
              return time.getTime() > Date.now();
            },
          },
          value1: "",
          value2: "",
          val:0
        };
      },
    created(){
        // axios.get("https://7nvr3rh17g.hk.aircode.run/hxl").then((response) => {
            //  console.log(response.data.result.shop);
          this.arr1=this.$store.state.arrccc
        //   console.log(this.arr[0].date);
          this.arr2 = this.arr1;
          this.arr = this.arr1.slice(0, this.hangshu);
        // });
    },
    watch: {
        arr1: {
            handler() {
              this.arr = this.arr1.slice(this.val*this.hangshu,this.val* this.hangshu+this.hangshu);
            },
            immediate: true, //一进入页面就执行handler里的代码
            deep: true,
          },
        
      },
      computed: {},
      methods: {
        open(item) {
          
              this.$message({
                type: 'info',
                message: '你权限不足!'
              });
           
          },
        ck(val) {
          this.val=val-1
          this.arr = this.arr2.slice(
          this.val* this.hangshu,
          this.val* this.hangshu + this.hangshu
          );
        },
        shousio() {
          this.arr2 = this.arr1.filter((item) => {
            return item.name.includes(this.shousiozhi);
          });
          this.arr = this.arr2.slice(0, this.hangshu);
        },
        shanchu(e){
        this.arr1=this.arr1.filter((item) => item.id != e)
        this.arr2 = this.arr1
        this.arr = this.arr2.slice(this.val*this.hangshu,this.val* this.hangshu+this.hangshu);
        // console.log(e);
        },
        genggai(e){
            
            this.$message({
                type: 'info',
                message: '你权限不足!'
              });
          },
          
          genggai11(){
          const date = new Date(this.form2.date);
          const year = date.getFullYear();
          const month = date.getMonth() + 1;
          const day = date.getDate();
          this.form2.date = `${year}-${month}-${day}`;
            let shu={
            name:this.form2.name,
            price: this.form2.price,
            date: this.form2.date,
            desc:this.form2.desc,
            id:this.form2.id
          }
          this.arr1.unshift(shu)
          this.arr2=this.arr1
          }
    
      },
      
    };
    </script>
    <style lang='less' scoped>
    td,
    th {
      border-top: 1px solid #e7e1e1;
      border-bottom: 1px solid #000;
      border-left: 0;
      border-right: 0;
    }
    </style>
    